<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue中的样式绑定(方式2)</title>
    <script src="../../vue.js"></script>
    <style>
        /* 这里是指定的class的元素颜色 */
        .activated {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div @click='divCLic' :class='[activated]'> <!-- 1. 设置calss属性的值为一个js数组.因为class可以设置多个值,所以这里设置一个数组 -->
            hello world
        </div>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                activated: '' // 2. 这里是数组的值,默认是一个空串
            },
            methods: {
                divCLic: function () { // 3. 单击事件,如果这个class值是指定的,那么就变成空,如果为空则变成这个指定的值,这样实现了颜色来回变换
                    this.activated = this.activated === 'activated' ? "" : 'activated';
                }
            },
        })
    </script>
</body>

</html>